<template>
  <div class="qr-code" v-show="qrCodeVisible">
    <div class="" ref="qrCodeUrl"></div>
    <div class="qr-close" @click="closeQrcode">
      <img src="../../../assets/svg/close.svg" alt="" class="close-img" />
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  name: "qrCode",
  data() {
    return {
      qrcode: null,
    };
  },
  computed: {
    qrCodeVisible() {
      return this.$store.state.tool.qrCodeVisible;
    },
  },
  mounted() {
    this.createQrCode();
  },
  methods: {
    createQrCode() {
      this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: "https://www.12306.cn/", // 需要转换为二维码的内容
        width: 150,
        height: 150,
        colorDark: "#3a502c",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    closeQrcode() {
      this.qrcode && this.qrcode.clear();
      this.qrcode = null;
      this.$store.commit("changeQrCodeVisible", false);
    },
  },
};
</script>

<style scoped>
.qr-code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  z-index: 5;
}
.qr-close {
  position: absolute;
  top: -25px;
  right: -25px;
  background: #1c1b1bb0;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 5px;
}
.close-img {
  height: 100%;
}
</style>